<template>
  <comm-dialog title="订单取消申请" cancelStr="暂不取消" submitStr="提交" @onSubmit="onSubmit">
    <el-form :model="form" label-width="auto" style="width: 600px" width="600">
      <el-form-item label="取消原因:"  required >
        <el-radio-group v-model="form.region">
          <div class="regionwaper">
            <p v-for="(item,index) in regionList"><el-radio :value="item.value">{{ item.label }}</el-radio></p>
          </div>
        </el-radio-group>
      </el-form-item>
    </el-form>
    <div class="tips">
      <p>温馨提示：</p>
      <p>订单成功取消后无法恢复</p>
      <p>订单成功取消后，该订单已付金额金额将返还到您的支付账户中，取消后 5 个工作日内退款完成</p>
    </div>
  </comm-dialog>
</template>

<script setup lang="ts">
import { reactive ,ref} from 'vue'
import CommDialog from '@/pages/mall/components/CommDialog.vue'
const form=reactive({
  region: '1',
})
const regionList=ref([
  {value:'4',label:'买错了'},
  {value:'1',label:'商品质量问题'},
  {value:'2',label:'物流损坏，发错货等'},
  {value:'3',label:'太贵了不买了'},
  {value:'5',label:'其他'},
])
const onSubmit=()=>{
  console.log(form.region)
}
</script>

<style scoped lang="scss">
.regionwaper{
  display: block;
  width: 100%;
  p{
    height: 32px;
  }
}
.tips{
  color: #aaa;
  text-align:left;
  
  p{
    margin-bottom: 4px;
    line-height: 20px;
  }
  p:first-child {
    margin-bottom: 6px;
  }
}
</style>
